<template>
	<view class="oa-content">


		<view class="" style="padding-bottom: 240rpx;">

			<picker @change="bindPickerChange" :value="index" :range="array">
				<view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
					<view class="justify-content-item tn-flex-1">
						<view class="tn-text-bold tn-text-lg">
							报销类型 <text class="tn-color-red tn-padding-left-xs">*</text>
						</view>
						<view class="tn-color-gray tn-padding-top-xs" v-if="index===99">
							请选择
						</view>
						<view class="tn-color-black tn-padding-top-xs" v-else>
							{{array[index]}}
						</view>
					</view>
					<view class="justify-content-item tn-text-lg tn-color-grey tn-margin-left">
						<view class="tn-icon-right tn-padding-top"></view>
					</view>
				</view>
			</picker>

			<view class="">
				<tn-picker mode="time" v-model="show" :params="params" :startYear="startYear" :endYear="endYear"
					@confirm="confirmPicker"></tn-picker>
			</view>

			<view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding" @tap="showPicker">
				<view class="justify-content-item tn-flex-1">
					<view class="tn-text-bold tn-text-lg">
						发生时间 <text class="tn-color-red tn-padding-left-xs">*</text>
					</view>
					<view class="tn-color-gray tn-padding-top-xs" v-if="result===''">
						请选择
					</view>
					<view class="tn-padding-top-xs" v-else>
						{{ result }}
					</view>
				</view>
				<view class="justify-content-item tn-text-lg tn-color-grey tn-margin-left">
					<view class="tn-icon-time tn-padding-top"></view>
				</view>
			</view>

			<view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
				<view class="justify-content-item tn-flex-1">
					<view class="tn-text-bold tn-text-lg">
						费用金额 <text class="tn-color-red tn-padding-left-xs">*</text>
					</view>
					<view class="tn-color-gray tn-padding-top-xs tn-color-black">
						<input placeholder="请输入" name="input" placeholder-style="color:#AAAAAA" value=""></input>
					</view>
				</view>
				<view class="justify-content-item tn-text-xl tn-color-grey tn-margin-left">
					<view class="tn-icon-money tn-padding-top"></view>
				</view>
			</view>



			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding">
				<view class="tn-flex justify-content-item">
					<view class="tn-text-bold tn-text-lg">
						费用说明 <text class="tn-color-red tn-padding-left-xs">*</text>
					</view>
				</view>
				<view class="tn-flex justify-content-item tn-color-gray">
					200字内
				</view>
			</view>
			<view class="tn-bg-gray--light tn-padding tn-text-justify"
				style="border-radius: 10rpx;margin: 0 30rpx 30rpx 30rpx;">
				<textarea maxlength="500" placeholder="请简单写一下报销事由" placeholder-style="color:#AAAAAA"
					style="height: 160rpx;width: 100%;"></textarea>
			</view>

			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding tn-strip-top">
				<view class="tn-flex justify-content-item">
					<view class="tn-text-bold tn-text-lg">
						上传图片
					</view>
				</view>
				<view class="tn-flex justify-content-item tn-color-gray">
					最多6张
				</view>
			</view>

			<view class="tn-padding-left tn-padding-top-xs tn-padding-bottom-xs tn-strip-bottom-min">
				<tn-image-upload-drag ref="imageUpload" :action="action" :width="236" :height="236" :formData="formData"
					:fileList="fileList" :disabled="disabled" :autoUpload="autoUpload" :maxCount="maxCount"
					:showUploadList="showUploadList" :showProgress="showProgress" :deleteable="deleteable"
					:customBtn="customBtn" @sort-list="onSortList" />

			</view>

			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding tn-strip-top">
				<view class="tn-flex justify-content-item">
					<view class="tn-text-bold tn-text-lg">
						上传附件
					</view>
				</view>
				<view class="justify-content-item tn-text-xl tn-color-grey">
					<view class="tn-icon-add-circle"></view>
				</view>
			</view>

			<view class="tn-margin-left tn-margin-right tn-margin-bottom"
				style="background-color: #00C8B008;color: #00C8B0;border-radius: 10rpx;">
				<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding">
					<view class="justify-content-item tn-text-bold tn-text-left" style="width: 80%;">
						<view class="">
							<text class="">年中新年活动-费用报销.xls</text>
						</view>
						<view class="tn-padding-top-xs tn-text-sm">
							<text class="tn-icon-folder-fill "></text>
							<text class="tn-padding-left-xs">36.66 KB</text>
						</view>
					</view>
					<view class="justify-content-item">
						<text class="tn-icon-close-fill"></text>
					</view>
				</view>
			</view>

			<view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding tn-strip-top">
				<view class="justify-content-item tn-flex-1">
					<view class="tn-text-bold tn-text-lg">
						审批人员 <text class="tn-color-red tn-padding-left-xs">*</text>
					</view>
					<view class="tn-color-gray tn-padding-top-xs">
						请选择
					</view>
				</view>
				<view class="justify-content-item tn-text-lg tn-color-grey tn-margin-left">
					<view class="tn-icon-my-add tn-padding-top"></view>
				</view>
			</view>

			<view class="tn-flex tn-flex-row-between tn-padding">
				<view class="justify-content-item tn-flex-1">
					<view class="tn-text-bold tn-text-lg">
						抄送人员 <text class="tn-color-red tn-padding-left-xs">*</text>
					</view>
					<view class="tn-color-gray tn-padding-top-xs">
						请选择
					</view>
				</view>
				<view class="justify-content-item tn-text-lg tn-color-grey tn-margin-left">
					<view class="tn-icon-my-add tn-padding-top"></view>
				</view>
			</view>



			<!-- 悬浮按钮-->
			<view class="tn-flex tn-footerfixed tn-padding">
				<view class="tn-flex-1 justify-content-item tn-text-center">
					<tn-button backgroundColor="#00C8B0 " padding="40rpx 0" width="60%" :fontSize="28"
						fontColor="#FFFFFF" shape="round" @click="tn('/workPages/prompt')">
						<text class="">提交申请</text>
					</tn-button>
				</view>
			</view>



		</view>
	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	export default {
		name: 'TemplateCost',
		mixins: [template_page_mixin],
		data() {
			return {
				// 只显示年月日时分，不显示秒
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				show: false,
				result: '',
				startYear: 2023,
				endYear: 2100,

				index: 99,
				array: ['餐饮费', '礼品费', '活动费', '物料费', '补助费', '交通费', '招待费', '医疗费', '出差费', '其他'],

				action: 'https://www.hualigs.cn/api/upload',
				// action: '',
				formData: {
					apiType: 'this,ali',
					token: 'dffc1e06e636cff0fdf7d877b6ae6a2e',
					image: null
				},
				fileList: [{
					url: 'https://p9.itc.cn/q_70/images01/20210426/fd86da2d027a48718b22795affefb2e8.jpeg'
				}],
				showUploadList: true,
				customBtn: false,
				autoUpload: true,
				showProgress: false,
				deleteable: true,
				customStyle: false,
				maxCount: 6,
				disabled: false,

				videoUrl: '',
			}
		},
		methods: {
			// 弹出Picker
			showPicker(event) {
				this.openPicker()
			},
			// 打开Picker
			openPicker() {
				this.show = true
			},

			// 点击确认按钮
			confirmPicker(event) {
				this.result =
					`${event.year}-${event.month}-${event.day} ${this.params.hour ? event.hour+':' : ''}${this.params.minute ? event.minute : ''}`
				// this.result = `${event.year}-${event.month}-${event.day} ${this.params.hour ? event.hour+':' : ''}${this.params.minute ? event.minute+':' : ''}${this.params.second ? event.second : ''}`
			},

			bindPickerChange: function(e) {
				this.index = e.detail.value
			},

			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
			// 手动上传文件
			upload() {
				this.$refs.imageUpload.upload()
			},
			// 图片拖拽重新排序
			onSortList(list) {
				console.log(list);
			},

			// 视频选择
			videoChooseHandle() {
				uni.chooseVideo({
					success: (res) => {
						// 上传完成后再把视频地址填写到这里，这里只是临时测试用
						this.videoUrl = res.tempFilePath
					}
				})
			},
			// 重新选择视频
			reChooseVideo() {
				this.videoUrl = ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 60%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 32rpx;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

	}

	.oa-content {
		max-width: 640px;
		margin: 0 auto;
		background-color: #FFF;
		min-height: 100vh;
		padding-bottom: 60rpx;
		padding-bottom: calc(80rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(80rpx + constant(safe-area-inset-bottom));
	}

	.video-choose {
		position: relative;
		width: calc(100% - 60rpx);
		height: 340rpx;
		background-color: #f8f7f8;
		color: #838383;
		border-radius: 10rpx;
		margin: 10rpx 0 30rpx 30rpx;

		.choose-operation {
			position: relative;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-radius: inherit;

			.icon {
				font-size: 70rpx;
				line-height: 1;
				padding: 20rpx;
			}

			.tips {
				line-height: 1;
			}
		}

		.video-preview {
			position: relative;
			width: 100%;
			height: 100%;
			border-radius: inherit;

			.video-container {
				width: 100%;
				height: 100%;
				border-radius: inherit;
			}

			.remove-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 0;
				right: 0;
				z-index: 10;
				border-top: 60rpx solid;
				border-left: 60rpx solid transparent;
				border-top-color: rgba(0, 0, 0, 0.1);
				width: 0rpx;
				height: 0rpx;

				&--icon {
					position: absolute;
					top: -50rpx;
					right: 6rpx;
					color: #FFFFFF;
					font-size: 24rpx;
					line-height: 1;
				}
			}
		}
	}

	/* 间隔线 start*/
	.tn-strip-bottom-min {
		width: 100%;
		border-bottom: 1rpx solid #F8F9FB;
	}

	.tn-strip-top {
		width: 100%;
		border-top: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	/* 间隔线 end*/

	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 160rpx;
		height: calc(180rpx + env(safe-area-inset-bottom) / 2);
		height: calc(180rpx + constant(safe-area-inset-bottom));
	}

	.tn-footerfixed {
		max-width: 640px;
		margin: 0 auto;
		position: fixed;
		width: 100%;
		bottom: calc(40rpx + env(safe-area-inset-bottom));
		z-index: 1;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
	}

	/* 底部悬浮按钮 end*/
</style>